<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>历史记录查询 - 顺引校验系统</title>
    <link href="/static/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        .main-container {
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            margin: 20px auto;
            max-width: 1200px;
        }
        
        .header {
            background: #4f5b93;
            color: white;
            padding: 24px;
            border-radius: 10px 10px 0 0;
            text-align: center;
        }
        
        .header h1 {
            margin: 0;
            font-size: 2.5rem;
            font-weight: 300;
        }
        
        .header p {
            margin: 10px 0 0 0;
            opacity: 0.9;
            font-size: 1.1rem;
        }
        
        .search-section {
            padding: 24px;
            background: #fff;
            display: flex;
            justify-content: center;
        }
        .search-box {
            background: #f5f6fa;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 18px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0;
            width: 100%;
            max-width: 520px;
        }
        .search-box form {
            display: flex;
            width: 100%;
        }
        .form-control {
            border: 1px solid #e9ecef;
            border-radius: 6px 0 0 6px;
            padding: 10px 16px;
            font-size: 1rem;
            flex: 1;
            min-width: 0;
        }
        .btn-primary {
            background: #4f5b93;
            border: none;
            border-radius: 0 6px 6px 0;
            padding: 10px 24px;
            font-size: 1rem;
            font-weight: 500;
            margin-left: -1px;
        }
        .btn-primary:hover {
            background: #667eea;
        }
        .results-section {
            padding: 0 24px 24px;
            background: #fff;
        }
        
        .stats-cards {
            display: flex;
            gap: 16px;
            margin-bottom: 18px;
        }
        
        .stat-card {
            background: #f5f6fa;
            color: #222;
            padding: 18px 0 10px 0;
            border-radius: 8px;
            text-align: center;
            box-shadow: none;
            flex: 1;
        }
        
        .stat-card.success {
            background: #e6f9f0;
            color: #1abc9c;
        }
        
        .stat-card.danger {
            background: #fbeaea;
            color: #e74c3c;
        }
        
        .stat-number {
            font-size: 2rem;
            font-weight: bold;
            margin-bottom: 2px;
        }
        
        .stat-label {
            font-size: 0.95rem;
            opacity: 0.8;
        }
        
        .table-container {
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 1px 4px rgba(0,0,0,0.03);
            margin: 0;
            padding: 0;
        }
        .table-responsive {
            width: 100%;
            overflow-x: auto;
        }
        .table {
            width: 100%;
            margin: 0;
        }
        
        .table thead th {
            background: #f5f6fa;
            color: #4f5b93;
            border: none;
            padding: 14px 10px;
            font-weight: 500;
            text-align: center;
        }
        
        .table tbody tr {
            transition: all 0.3s ease;
        }
        
        .table tbody tr:hover {
            background-color: #f5f6fa;
            transform: none;
        }
        
        .table tbody td {
            padding: 10px;
            border-bottom: 1px solid #e9ecef;
            vertical-align: middle;
            text-align: center;
        }
        .table tbody td.result-cell {
            text-align: center;
        }
        
        .badge {
            padding: 5px 12px;
            border-radius: 12px;
            font-size: 0.9rem;
            font-weight: 500;
        }
        
        .badge-success {
            background: #e6f9f0;
            color: #1abc9c;
        }
        
        .badge-danger {
            background: #fbeaea;
            color: #e74c3c;
        }
        
        .loading {
            text-align: center;
            padding: 40px;
            color: #667eea;
        }
        
        .no-data {
            text-align: center;
            padding: 60px 20px;
            color: #6c757d;
        }
        
        .no-data i {
            font-size: 4rem;
            margin-bottom: 20px;
            opacity: 0.5;
        }
        
        .back-btn {
            position: fixed;
            top: 20px;
            left: 20px;
            background: rgba(255, 255, 255, 0.9);
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #667eea;
            font-size: 1.2rem;
            transition: all 0.3s ease;
            z-index: 1000;
        }
        
        .back-btn:hover {
            background: white;
            transform: scale(1.1);
            color: #667eea;
        }
        
        .pagination-container {
            padding: 20px;
            background: white;
            border-top: 1px solid #e9ecef;
        }
        
        .pagination .page-link {
            color: #667eea;
            border-color: #e9ecef;
            margin: 0 2px;
            border-radius: 8px;
        }
        
        .pagination .page-item.active .page-link {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-color: #667eea;
        }
        
        .pagination .page-link:hover {
            background-color: #f8f9fa;
            color: #667eea;
        }
        
        @media (max-width: 768px) {
            .main-container {
                margin: 10px;
                border-radius: 15px;
            }
            
            .header {
                padding: 20px;
                border-radius: 15px 15px 0 0;
            }
            
            .header h1 {
                font-size: 2rem;
            }
            
            .search-section, .results-section {
                padding: 20px;
            }
            
            .stats-cards {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <a href="/" class="back-btn" title="返回主页">
        <i class="fas fa-arrow-left"></i>
    </a>
    
    <div class="container-fluid">
        <div class="main-container">
            <div class="header">
                <h1><i class="fas fa-history"></i> 历史记录查询</h1>
                <p>输入单号查询历史验证记录</p>
            </div>
            
            <div class="search-section">
                <div class="search-box">
                    <form onsubmit="event.preventDefault();searchHistory();">
                        <input type="text" class="form-control" id="orderNo" 
                               placeholder="请输入单号..." autocomplete="off">
                        <button type="submit" class="btn btn-primary">
                            查询历史
                        </button>
                    </form>
                </div>
            </div>
            
            <div class="results-section" id="resultsSection" style="display: none;">
                <div class="stats-cards" id="statsCards"></div>
                <div id="exportBtnContainer" style="text-align:right;display:none;margin-bottom:10px;">
                  <button id="exportExcelBtn" class="btn btn-primary" style="min-width:120px;">导出Excel</button>
                </div>
                
                <div class="table-container">
                    <div class="table-responsive">
                        <table class="table table-hover" id="historyTable">
                            <thead>
                                <tr>
                                    <th><i class="fas fa-sort-numeric-down"></i> 排序</th>
                                    <th><i class="fas fa-barcode"></i> 物料编码</th>
                                    <th><i class="fas fa-qrcode"></i> SN码</th>
                                    <th><i class="fas fa-key"></i> 唯一码</th>
                                    <th><i class="fas fa-external-link-alt"></i> 物料外码</th>
                                    <th><i class="fas fa-check-circle"></i> 验证结果</th>
                                    <th><i class="fas fa-clock"></i> 扫描时间</th>
                                </tr>
                            </thead>
                            <tbody id="historyTableBody">
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- 分页控件 -->
                    <div class="pagination-container" id="paginationContainer" style="display: none;">
                        <nav aria-label="历史记录分页">
                            <ul class="pagination justify-content-center" id="pagination">
                            </ul>
                        </nav>
                        <div class="text-center mt-3">
                            <small class="text-muted" id="paginationInfo"></small>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="loading" id="loading" style="display: none;">
                <i class="fas fa-spinner fa-spin fa-3x"></i>
                <p class="mt-3">正在查询历史记录...</p>
            </div>
            
            <div class="no-data" id="noData" style="display: none;">
                <i class="fas fa-inbox"></i>
                <h4>暂无历史记录</h4>
                <p>该单号暂无历史验证记录</p>
            </div>
        </div>
    </div>

    <script src="/static/js/axios.min.js"></script>
    <script>
        let currentOrderNo = '';
        let currentPage = 1;
        
        function searchHistory(page = 1) {
            const orderNo = document.getElementById('orderNo').value.trim();
            
            if (!orderNo) {
                alert('请输入单号');
                return;
            }
            
            currentOrderNo = orderNo;
            currentPage = page;
            
            console.log('开始查询历史记录:', orderNo, page);
            
            // 显示加载状态
            document.getElementById('loading').style.display = 'block';
            document.getElementById('resultsSection').style.display = 'none';
            document.getElementById('noData').style.display = 'none';
            
            // 发送请求
            const formData = new FormData();
            formData.append('order_no', orderNo);
            formData.append('page', page);
            formData.append('page_size', 50);
            
            axios.post('/api/history', formData)
                .then(response => {
                    document.getElementById('loading').style.display = 'none';
                    console.log('查询响应:', response.data);
                    
                    if (response.data.success) {
                        displayResults(response.data);
                    } else {
                        alert(response.data.message || '查询失败');
                        showNoData();
                    }
                })
                .catch(error => {
                    document.getElementById('loading').style.display = 'none';
                    console.error('查询失败:', error);
                    alert('查询失败，请检查网络连接或联系管理员');
                });
        }
        
        function displayResults(data) {
            const { records, statistics, pagination } = data;
            
            if (records.length === 0) {
                showNoData();
                return;
            }
            
            // 显示统计卡片
            displayStats(statistics);
            
            // 显示导出按钮
            document.getElementById('exportBtnContainer').style.display = 'block';
            
            // 显示表格数据
            displayTable(records);
            
            // 显示分页控件
            displayPagination(pagination);
            
            document.getElementById('resultsSection').style.display = 'block';
        }
        
        function displayStats(stats) {
            const statsCards = document.getElementById('statsCards');
            statsCards.innerHTML = `
                <div class="stat-card">
                    <div class="stat-number">${stats.total}</div>
                    <div class="stat-label">总扫描次数</div>
                </div>
                <div class="stat-card success">
                    <div class="stat-number">${stats.success}</div>
                    <div class="stat-label">验证成功</div>
                </div>
                <div class="stat-card danger">
                    <div class="stat-number">${stats.fail}</div>
                    <div class="stat-label">验证失败</div>
                </div>
            `;
        }
        
        function displayTable(records) {
            const tbody = document.getElementById('historyTableBody');
            tbody.innerHTML = '';
            
            records.forEach(record => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td><strong>${record.sort}</strong></td>
                    <td>${record.material_code}</td>
                    <td><code>${record.sn}</code></td>
                    <td><code>${record.unique_code}</code></td>
                    <td>${record.external_code || '-'}</td>
                    <td class="result-cell">
                        <span class="badge ${record.validation_result === '成功' ? 'badge-success' : 'badge-danger'}">
                            <i class="fas ${record.validation_result === '成功' ? 'fa-check' : 'fa-times'}"></i>
                            ${record.validation_result}
                        </span>
                    </td>
                    <td><small>${record.scan_time}</small></td>
                `;
                tbody.appendChild(row);
            });
        }
        
        function showNoData() {
            document.getElementById('noData').style.display = 'block';
        }
        
        function displayPagination(pagination) {
            const container = document.getElementById('paginationContainer');
            const paginationElement = document.getElementById('pagination');
            const infoElement = document.getElementById('paginationInfo');
            
            if (pagination.total_pages <= 1) {
                container.style.display = 'none';
                return;
            }
            
            container.style.display = 'block';
            
            // 更新分页信息
            infoElement.textContent = `显示第 ${pagination.current_page} 页，共 ${pagination.total_pages} 页，总计 ${pagination.total_records} 条记录`;
            
            // 生成分页按钮
            let paginationHtml = '';
            
            // 上一页按钮
            if (pagination.current_page > 1) {
                paginationHtml += `<li class="page-item">
                    <a class="page-link" href="#" onclick="searchHistory(${pagination.current_page - 1})">
                        <i class="fas fa-chevron-left"></i> 上一页
                    </a>
                </li>`;
            }
            
            // 页码按钮
            const startPage = Math.max(1, pagination.current_page - 2);
            const endPage = Math.min(pagination.total_pages, pagination.current_page + 2);
            
            for (let i = startPage; i <= endPage; i++) {
                const activeClass = i === pagination.current_page ? 'active' : '';
                paginationHtml += `<li class="page-item ${activeClass}">
                    <a class="page-link" href="#" onclick="searchHistory(${i})">${i}</a>
                </li>`;
            }
            
            // 下一页按钮
            if (pagination.current_page < pagination.total_pages) {
                paginationHtml += `<li class="page-item">
                    <a class="page-link" href="#" onclick="searchHistory(${pagination.current_page + 1})">
                        下一页 <i class="fas fa-chevron-right"></i>
                    </a>
                </li>`;
            }
            
            paginationElement.innerHTML = paginationHtml;
        }
        
        // 回车键搜索
        document.getElementById('orderNo').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                searchHistory();
            }
        });
        
        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 聚焦到输入框
            document.getElementById('orderNo').focus();
            // 导出Excel按钮事件
            document.getElementById('exportExcelBtn').onclick = function() {
                if (!currentOrderNo) {
                    alert('请先查询单号');
                    return;
                }
                window.open(`/api/history/export?order_no=${encodeURIComponent(currentOrderNo)}`);
            };
        });
    </script>
</body>
</html> 